<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <embed src="./audio/一生有你 - 水木年华.mp3" hidden="true" autostart="true" loop="true">
    <style type="text/css">
        html, body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        html, body{
            background: black;
            height: 100%;
            width: 100%;
        }
        .bgBox {
            width: 100%;
            height: 96%;
            background:url('./images/bg4_1.jpg');
            background-repeat: repeat;
            animation:auto 15s linear infinite;
        }
        .content{
            width: 200px;
            height: 300px;
            position: relative;
            perspective: 1000px;
            top: 50%;
            left: 50%;
            transform: translate(-50px, -75px);
        }
        .box{
            width: 100px;
            height: 150px;
            transform-style: preserve-3d;
            transform:rotateX(-30deg);
            animation:photo 15s linear infinite;
        }
        .box:hover{
            animation:photo 15s linear infinite paused;
        }
        .box img{
            width: 150px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            transform-style: preserve-3d;
            transition: all 1s;
        }
        .box img:nth-child(1){
            transform:translateZ(280px);
        }
        .box img:nth-child(2){
            transform:rotateY(51deg) translateZ(300px);
        }
        .box img:nth-child(3){
            transform:rotateY(102deg) translateZ(320px);
        }
        .box img:nth-child(4){
            transform:rotateY(153deg) translateZ(300px);
        }
        .box img:nth-child(5){
            transform:rotateY(204deg) translateZ(300px);
        }
        .box img:nth-child(6){
            transform:rotateY(255deg) translateZ(320px);
        }
        .box img:nth-child(7){
            transform:rotateY(306deg) translateZ(300px);
        }
        .box img:nth-child(8){
            transform:rotateY(360deg) translateZ(280px);
        }
        .box img:nth-child(9){
            /* transform:rotateY(360deg) translateZ(280px); */
        }
         
        .box img:nth-child(1):hover{
            transform:translateZ(280px) scale(1.2);
        }
        .box img:nth-child(2):hover{
            transform:rotateY(51deg) translateZ(300px) scale(1.2);
        }
        .box img:nth-child(3):hover{
            transform:rotateY(102deg) translateZ(320px) scale(1.2);
        }
        .box img:nth-child(4):hover{
            transform:rotateY(153deg) translateZ(300px) scale(1.2);
        }
        .box img:nth-child(5):hover{
            transform:rotateY(204deg) translateZ(300px) scale(1.2);
        }
        .box img:nth-child(6):hover{
            transform:rotateY(255deg) translateZ(320px) scale(1.2);
        }
        .box img:nth-child(7):hover{
            transform:rotateY(306deg) translateZ(300px) scale(1.2);
        }
        .box img:nth-child(8):hover{
            transform:rotateY(360deg) translateZ(280px) scale(1.2);
        }
    
         
        @keyframes photo{
            0%{
                transform:rotateX(-30deg) rotateY(0deg);
            }
            100%{
                transform:rotateX(-30deg) rotateY(360deg);
            }
        }
        @keyframes auto{
            form{background-position-y: 0;}
            to{background-position-y: 1800px;}

        }
        </style>
</head>
<body>
    <div class="bgBox">
        <div class="content">
            <div class="box">
                <img src="./images/img1.jpg" alt=""/>
                <img src="./images/img2.jpg" alt=""/>
                <img src="./images/img3.jpg" alt=""/>
                <img src="./images/img4.jpg" alt=""/>
                <img src="./images/img5.jpg" alt=""/>
                <img src="./images/img6.jpg" alt=""/>
                <img src="./images/img7.jpg" alt=""/>
                <img src="./images/img8.jpg" alt=""/>
                <img src="./images/img9.jpg" alt=""/>

            </div>
            <!-- <audio id="audioBox" src="./audio/一生有你 - 水木年华.mp3" loop="true" controls="false" poster="" name="未知音频" author="未知作者" 
                binderror="" bindplay="" bindpause="" bindtimeupdate="" bindended="">
            </audio> -->
        </div>
    </div>
</body>
</html>